<template>
	<div class="index">
		<div class="container">
			<SwiperItem></SwiperItem>
			<div class="ads-box">
				<a :href="'/#/product/'+item.id" v-for="item,index in adsList" :key="index">
					<img v-lazy="item.img" alt="">
				</a>
			</div>
			<div class="banner">
				<a href="/#/product/30">
					<img v-lazy="'/imgs/banner-1.png'" alt="">
				</a>
			</div>
			<div class="product-box">
				<h2>手机</h2>
				<div class="wrapper">
					<div class="banner-left">
						<a href="/#/product/35"><img v-lazy="'/imgs/mix-alpha.jpg'" alt=""></a>
					</div>
					<div class="list-box">
						<div class="list" v-for="item,index in phoneList"  :key="index">
							<div class="item" v-for="item1,index1 in item " :key="index1">
								<span :class="{'new-pro':index1%2==0}" v-if="index1%2==0">新品</span>
								<span :class="{'kill-pro':index1%2!==0}" v-if="index1%2!==0">秒杀</span>
								<div class="item-img">
									<img v-if="index==0" v-lazy="item1.imageHost+'/'+item1.mainImage" alt="">
									<img v-if="index==1" v-lazy="item1.mainImage" alt="">
								</div>
								<div class="item-info">
									<h3>{{item1.name}}</h3>
									<p>{{item1.subtitle}}</p>
									<p class="price"  @click="changeShowModal(item1.id)">{{item1.price|changePriceStyle}}</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<ServiceBar></ServiceBar>
		<Modal title="提示" sureText="查看购物车" btnType="1" modalType="middle" :showModal="showModal"
		@closeModal="closeModal" @submit="submit()">
			<template v-slot:body>
				<p>商品添加成功</p>
			</template>
		</Modal>
	</div>
</template>

<script>
	import ServiceBar from '../components/ServiceBar.vue'
	import SwiperItem from './indexSwiper/swiperItem.vue'
	import Modal from '../components/Modal.vue'
	export default{
		components:{
			ServiceBar,
			SwiperItem,
			Modal
		},  
		data(){
			return{
				adsList:[{
					id:33,img:'/imgs/ads/ads-1.png'
				},{
					id:33,img:'/imgs/ads/ads-2.jpg'
				},{
					id:33,img:'/imgs/ads/ads-3.png'
				},{
					id:33,img:'/imgs/ads/ads-4.jpg'
				}],
				phoneList:[],
				showModal:false
			}
		},
		created() {
			this.init();
		},
		filters:{
			changePriceStyle(item){
				return "￥"+item+"元"
			}
		},
		methods:{
			submit(){
				this.$router.push("/cart")
			},
			changeShowModal(id){
				this.axios.post('/carts',{
						productId:id,
						selected:true
					}).then(res=>{
						this.showModal=true;
						this.$store.dispatch("saveCartCount",res.cartTotalQuantity)
					}).catch(err=>console.log(err))
				
			},
			init(){
				this.axios.get('/products',{
					params:{categortId:100012,
					pageSize:8}
				}).then(res=>{
					//slice不会改变元数组
					console.log(res)
					this.phoneList=[res.list.slice(0,4),res.list.slice(4,8)]
					console.log(this.phoneList)
				})
			},
			closeModal(){
				this.showModal=false
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	@import '../assets/css/mixin.less';
	@import '../assets/css/config.less';
	.index{
		text-align: center;
		.container{
			width: 1226px;
			display: inline-block;
			position: relative;
			.ads-box{
				display: flex;
				justify-content: space-between;
				a{
					width: 296px;
					height: 167px;
					margin-top: 14px;
					margin-bottom: 31px;
					img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.banner{
				margin-bottom: 50px;
				a{
					width: 1226px;
					height: 130px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				
			}
			.product-box{
				background-color: #F5F5F5;
				padding: 20px 0 50px;
				h2{
					font-size: 22px;
					height: 21px;
					line-height: 21px;
					color: #333;
					text-align: left;
					margin-bottom: 20px;
				}
			}
			.wrapper{
				display: flex;
				.banner-left{
					display: inline-block;
					margin-right: 16px;
					img{
						width: 224px;
						height: 619px;
						
					}
				}
				.list-box{
					.list{
						.flex(space-around);
						width: 986px;
						margin-bottom: 14px;
						&:last-child{
							margin-bottom: 0;
						}
						.item{
							width: 236px;
							height: 302px;
							background-color: #fff;
							span{
								display: inline-block;
								width: 67px;
								height: 24px;
								font-size: 14px;
								line-height: 24px;
								color: #fff;
								&.new-pro{
									background-color: #7ecf68;
								}
								&.kill-pro{
									background-color: #e82626;
								}
							}
						}
						.item-img{
							img{
								height: 195px;
								width: 100%;
							}
						}
						.item-info{
							h3{
								font-size: 14px;
								color: #333;
								line-height: 14px;
								font-weight: bold;
							}
							p{
								color: #999;
								line-height: 13px;
								margin: 6px auto 13px;
							}
							.price{
								color: #f20a0a;
								font-size: 13px;
								font-weight: bold;
								cursor: pointer;
								&::after{
									.bgImg(22px,22px,'/imgs/icon-cart-hover.png');
									content: '';
									margin-left: 5px;
									vertical-align: middle;
								}
							}
						}
					}
				}
			}
		}
		
	}
</style>
